<template>
  <cu-layout :navProp="{ placeholder: true, title: '预定详情', textColor: 'black' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-booking-details-container`]">
      <view class="reservation-item-detail booking-card">
        <image :src="formData.cover"></image>
        <view class="info">
          <text class="Building">{{ formData.room_number }}</text>
          <text class="shop">{{ formData.area }}</text>
          <text class="price">{{ formData.project_name }}</text>
        </view>
        <view class="status-name">{{ formData.status }}</view>
      </view>
      <!-- 温馨提示 -->
      <view class="tips booking-card">
        <view class="booking-title">温馨提示</view>
        <view v-if="formData.tips" v-html="formData.tips"></view>
      </view>
      <!-- form -->
      <view class="booking-wrap">
        <view class="row-booking-title">预定信息</view>
        <view class="booking-row">
          <view class="row-left">定金</view>
          <view class="row-right">{{ formData.deposit }}元</view>
        </view>
        <view class="booking-row">
          <view class="row-left">户型</view>
          <view class="row-right">{{ formData.room_type_name }}</view>
        </view>
        <view class="booking-row">
          <view class="row-left">月租</view>
          <view class="row-right">{{ formData.rent }}元</view>
        </view>
        <view class="booking-row">
          <view class="row-left">到期时间</view>
          <view class="row-right">{{ formData.lose_time }}</view>
        </view>
        <view class="row-booking-title">个人信息</view>
        <view class="booking-row">
          <view class="row-left">姓名</view>
          <view class="row-right">{{ formData.customer_name }}</view>
        </view>
        <view class="booking-row">
          <view class="row-left">手机号</view>
          <view class="row-right">{{ formData.phone }}</view>
        </view>
        <view class="booking-row">
          <view class="row-left">大陆身份证</view>
          <view class="row-right">{{ formData.card_num }}</view>
        </view>
        <view class="booking-row">
          <view class="row-left">公司</view>
          <view class="row-right">{{ formData.customer_company }}</view>
        </view>
      </view>
      <view class="fixed-button" :style="{ bottom: `${safeAreaInsets}rpx` }">
        <uv-button type="primary" text="查看预定协议" :plain="true" customStyle="margin-top: 10px" @click="move"></uv-button>
        <uv-button v-if="formData.status == '预定成功'" type="primary" text="去签约" customStyle="margin-top: 10px" @click="submit"></uv-button>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { detail } from './api'

export default {
  name: 'booking-details',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      safeAreaInsets: 0,
      formData: {
        cover: '',
        room_number: '',
        room_id: '',
        area: '',
        project_name: '',
        project_id: '',
        status: '',
        tips: '',
        deposit: '',
        room_type_name: '',
        rent: '',
        lose_time: '',
        customer_name: '',
        phone: '',
        card_num: '',
        customer_company: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await detail({ id })
      for (let key in this.formData) {
        this.formData[key] = data[key] || ''
      }
    },
    async move() {
      const { id } = this.$Route.query
      this.$ROUTE.go('/pages/subpackage/contract/contract-html', { id, type: 'agreement' })
    },
    submit() {
      const { project_name: projectName, project_id: projectId, room_number, room_id: roomId } = this.formData
      this.$ROUTE.go('/pages/subpackage/online-signing/index', { status: 'convert', projectName, projectId, roomId, room_number })
      // this.$ROUTE.go('/pages/subpackage/online-signing/index', { status: 'convert' })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('booking-details-container')} {
  position: relative;
  background: #f5f5f5;
  overflow: scroll;
  padding-bottom: 100px;
  .booking-card {
    // width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background: white;
    margin: 10px;
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8rpx;
  }
  .reservation-item-detail {
    box-sizing: border-box;
    padding: 20px 10px;
    display: flex;
    position: relative;
    image {
      background: #f1f1f1;
      width: 120px;
      height: 90px;
      border-radius: 8rpx;
      margin-right: 30rpx;
    }
    .info {
      .price-primary {
        color: $uv-price-primary;
      }
      display: flex;
      flex-direction: column;
      .Building {
        font-weight: 600;
        font-size: 14px;
        color: #333;
        margin: 10rpx 0;
      }
      .shop {
        font-weight: 400;
        font-size: 11px;
        margin: 10rpx 0;
        color: #333;
      }
      .price {
        font-size: 14px;
        color: #333;
      }
    }
    .status-name {
      position: absolute;
      top: 10px;
      right: 10px;
      color: white;
      background: $uv-primary;
      border-radius: 8rpx;
      padding: 5px 10px;
      font-size: 10px;
    }
  }
  .tips {
    min-height: 100px;
    .booking-title {
      font-weight: bold;
      color: #333;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .booking-wrap {
    background: white;
    box-sizing: border-box;
    padding: 20px 15px;
    .row-booking-title {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .booking-row {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      padding: 30rpx 0;
      border-bottom: 1px solid #f1f1f1;
    }
  }
  .fixed-button {
    position: fixed;
    left: 0;
    z-index: 2;
    width: 100%;
    background: white;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    display: flex;
    ::v-deep .uv-button-wrapper {
      flex: 1;
      margin: 0 15px;
    }
  }
}
</style>
